<template>
  <div>
    <h1>App</h1>

    {{ info }}
    <hr>
    <button @click="info.name = 'lili'">name='lili'</button>
    <button @click="info.size.h = 1000">info.size.h=1000</button>
    <button @click="info = { jack: 'lili', size: { h: 1000, w: 2000 } }">info</button>

  </div>
</template>
<script setup>
import { computed, ref, watch } from 'vue';

const info = ref({
  name: 'jack',
  size: {
    h: 100,
    w: 200,
  }
})

watch(info, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}, {
  deep: true
});





</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>